<template>
  <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-model="state.isShowDialog" width="70%"
    center>
    <template #title>
      <div style="font-size: large"
        v-drag="['.system-partner-container .el-dialog', '.system-partner-container .el-dialog__header']">
        {{ state.title }}
      </div>
    </template>
    <form-create ref="fc" v-model="formData" v-model:api="state.fApi" :rule="state.rule"
      :option="state.option"></form-create>
    <template #footer>
      <el-button v-if="state.status != 2" type="primary" @click="handleSubmit">提交</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { reactive, defineProps, defineExpose, ref } from 'vue';
import { get, add, update } from '@/api/public/basic';
import { ElMessage } from 'element-plus';
import { gatherId } from '@/utils/dataGather'

const emit = defineEmits(['handleQuery'])
const fc = ref();
const props = defineProps({
  bindPage: {
    type: String,
    default: '',
  },
  listId: {
    type: String,
    default: '',
  },
  query: {
    type: Object,
    default: () => { },
  }
});

const state = reactive({
  //实例对象
  fApi: {},
  //表单数据
  formData: {},
  //表单生成规则
  rule: [],
  //组件参数配置
  option: {},
  title: '',
  isShowDialog: false,
  // 0 新增  1 修改 2 详情
  status: 0,
  // 更新表单需要用的id
  updateId: ''
});

const handleSubmit = () => {
  state.fApi.submit().then(data => {
    // 提交成功
    let formData = { ...state.fApi.formData() };
    if (state.updateId) {
      delete formData.proprietorId
      delete formData.proprietorName
      // 修改
      update(state.updateId, formData, props.listId).then((response) => {
        if (response.code == 200) {
          ElMessage.success('保存成功');
          state.isShowDialog = false
          emit('handleQuery', props.query)
        } else {
          ElMessage.error(response.msg);
        }
      });
    } else {
      add(formData, props.listId).then(res => {
        if (res.status == 0) {
          ElMessage.success('保存成功');
          state.updateId = res.data;
          state.isShowDialog = false
          emit('handleQuery', props.query)
        } else {
          ElMessage.error(response.msg);
        }
      })
    }
  })
};

// 获取列表详情
const getDetail = (mainKey) => {
  get(mainKey, props.listId).then((response) => {
    if (response.code == 200) {
      state.fApi.coverValue({})
      setTimeout(() => (state.fApi.setValue(response.data && response.data[0] || {})))
    } else {
      ElMessage.error(response.msg);
    }
  })
}

const openDialog = (status, mainKey) => {
  // 获取表单配置
  get(props.bindPage, gatherId.PAGE_LIST_ID).then((response) => {
    if (response.code == 200) {
      const data = response.data && response.data[0];
      state.title = status == 0 ? '新增' + data.title : status == 1 ? '修改' + data.title : '查看详情';
      state.status = status;
      if (data.template) {
        const templateParse = JSON.parse(data.template);
        state.rule = templateParse.rule;
        state.option = templateParse.options;
        state.isShowDialog = true;
      }
      if (status) {
        state.updateId = mainKey
        if (status == 2) {
          // 禁用
          // state.fApi.disabled(true)
        }
        getDetail(mainKey)
      } else {
        state.fApi.coverValue({})
        state.updateId = ''
      }
    } else {
      ElMessage.error(response.msg);
    }
  });
};

defineExpose({
  openDialog,
});
</script>
